<template>
  <div class="extend">
    <div class="tab_nav_bg" >
      <div  class="flex_center">
        <van-icon name="arrow-left" class="nav_left_icon" @click="$router.go(-1)"  size="18px"/>
        <div style="flex: 1;text-align: center">{{$t('展期')}}</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="extend_day_box">
        <div style="text-align: left;color: #FFFFFF;padding-bottom: 15px">
          <div style="font-size: 26px;margin-bottom: 10px">Extend repayment</div>
          <div >Extending the repayment period for the current payment,making repayment easier and stress-free.</div>
        </div>
        <div class="extend_box_card">
          <div style="width: 40%">
            <div class="box">
              <div class="term_text">{{ extendDayInfo.extendMonthStart }}</div>
              <div class="term_text">{{ extendDayInfo.extendDayStart }}</div>
            </div>
            <p>Original Payment Due Date</p>
          </div>
          <div style="width: 20%">
            <img style="height: 30px;width: 30px" src="../../../assets/order/extend_right.png">
          </div>
          <div style="width: 40%">
            <div class="box">
              <div class="term_text">{{ extendDayInfo.extendMonthEnd }}</div>
              <div class="term_text">{{ extendDayInfo.extendDayEnd }}</div>
            </div>
            <p>New Payment Due Date</p>
          </div>
        </div>
      </div>
      <div class="repayment_info_box">
        <div class="header">
          <div style="font-size: 20px">
            <span class="text_highlight"> Extension Order</span>
          </div>
        </div>
        <div class="body">
          <div class="body_item">
            <div style="color: #999999;margin-bottom: 5px">{{$t('订单号')}}</div>
            <div>{{$route.query.loanRecordId}}</div>
          </div>
          <div class="body_item">
            <div style="color: #999999;margin-bottom: 5px">{{$t('产品名称')}}</div>
            <div>{{$route.query.appName}}</div>
          </div>
          <div class="body_item">
            <div style="color: #999999;margin-bottom: 5px">{{$t('展期天数')}}</div>
            <div>{{extendLoanInfo.rollOverDay}}{{$t('天')}}</div>
          </div>
          <div class="body_item">
            <div style="color: #999999;margin-bottom: 5px">{{$t('展期后还款时间')}}</div>
            <div>{{ $dateFormat(new Date(extendLoanInfo.rollRefundDate), 'dd/mm/YYYY')  }}</div>
          </div>
          <div class="repay_info">
            <div>
              <div style="margin-bottom: 5px">Extension Repayment</div>
              <span>Fee：<span class="text_amount">₱{{extendLoanInfo.totalAmount}}</span></span>
            </div>
            <van-button type="primary" style="border-radius: 10px;font-size: 18px"  @click="handleRepayment($route.query)">Extend Now</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, ref, toRefs} from "vue";
import {repaymentDetails, fetchExtendDay, registerVirtual, virtualCardByRegister, fetchRepaymentType} from '@/api/order'
import router from "@/router";
import {formatMoney} from '@/utils/tool'
import {Dialog, Toast} from "vant";
import {useI18n} from 'vue-i18n'
import {useStore} from "vuex";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const {t} = useI18n()
    const details = ref({})
    const store = useStore()
    const {loanRecordId} = router.currentRoute.value.query
    const visibleShow = ref(false)
    const extendLoanInfo = ref({})
    const extendDayInfo = reactive({
      extendDayStart: '',
      extendMonthStart: '',
      extendMonthEnd: '',
      extendDayEnd: ''
    })
    const fetchRepaymentDetails = async () => {
      const res = await repaymentDetails({loanRecordId})
      if (res.code === 1) {
        details.value = res.data || {}
        const refundDate = new Date(details.value.lastRepaymentDay).toDateString().split(' ')
        extendDayInfo.extendDayStart = refundDate[2]
        extendDayInfo.extendMonthStart = refundDate[1]
      }
      // 清除loading
      store.dispatch('changeLoading', false)
    }

    async function getExtendDays() {
      const res = await fetchExtendDay({loanRecordId})
      if (res.code === 1) {
        if (res.data.length !== 0) {
          extendLoanInfo.value = {
            ...res.data[0],
          }
          const refundDate = new Date(extendLoanInfo.value.rollRefundDate).toDateString().split(' ')
          extendDayInfo.extendDayEnd = refundDate[2]
          extendDayInfo.extendMonthEnd = refundDate[1]
        }
      }
    }

    // 格式化金额
    const formatterMoney = (value) => {
      if (typeof value !== "undefined") {
        return formatMoney(value)
      } else {
        return value
      }
    }

    function handleRepayment(params) {
      router.push({
        path: '/JkGQsgTJyZ',
        query: {
          loanRecordId: params.loanRecordId,
          appName: params.appName,
          type: 'extend'
        }
      })
    }

    onMounted(() => {
      fetchRepaymentDetails()
      getExtendDays()

    })
    return {
      handleRepayment,
      visibleShow,
      details,
      extendDayInfo,
      formatterMoney,
      extendLoanInfo,
    }
  }
}
</script>

<style lang="less" scoped>


.extend {
  position: relative;
  overflow: auto;

  .wrapper {
    margin-top: -150px;
    padding: 15px;
  }
  .title_icon {
    height: 30px;
    width: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .extend_day_box {
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    .extend_box_card {
      border-radius: 6px;
      padding: 25px 15px;
      background-color: #ffffff;
      color: #333333;
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      font-size: 12px;
    margin-bottom: 20px;
      .term_text {
        font-size: 20px;
        line-height: 30px;
      }

      .box {
        width: 82px;
        box-sizing: border-box;
        padding-top: 30px;
        height: 100px;
        margin: 0 auto;
        background-color: #FFFFFF;
        background-image: url("../../../assets/order/order_extend_pane.png");
        background-size: 100% 100%;
        border-radius: 6px;
      }
    }

  }

  .repayment_info_box {
    background-color: #ffffff;
    border-radius: 6px;
    font-size: 14px;

    .header {
      font-size: 20px;
      padding: 10px;
      background: #D0F0F0;
      color: #15B3B2;
    }

    .body {
      padding: 10px;
      font-size: 16px;
      .body_item {
        padding: 8px 0;
      }

      .repay_info {
        margin-top: 10px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text_amount {
          color: #FFC74C;
          font-size: 22px;
        }
      }
    }
  }

  .step_box {
    margin: 20px 10px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    padding-bottom: 10px ;
  }
  .step_title{
    text-align: center;
    margin: 0 50px;
    margin-bottom: 15px;
    padding: 10px 20px;
    font-size: 18px;
    color: #FFFFFF;
    background-size: 100% 100%;
  }
  .step_img {
    height: 36px;
    width: 97px;
    background-size: 100% 100%;
    text-align: center;
    color: #99503D;
    line-height: 36px;
    margin-bottom: 15px;
  }

  .step_tips {
    text-align: left;
    font-size: 12px;
    margin: 25px 0;
    padding: 0 20px;
  }
}

</style>
